<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于我们 - 声破天音乐</title>
    <link rel="stylesheet" href="assets/css/main.css">
    <link rel="stylesheet" href="assets/css/about.css">
    <link rel="stylesheet" href="assets/css/player-bar.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>

<body>
    <div class="main-container">
        <!-- 侧边导航栏 -->
        <aside class="sidebar">
            <div class="logo">
                <a href="landing.html">
                    <svg viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="25" cy="25" r="20" fill="#1DB954" />
                        <path d="M18 27.5C18 27.5 22 23.5 25 23.5C28 23.5 32 27.5 32 27.5" stroke="black" stroke-width="2"
                            fill="none" />
                        <path d="M16 21.5C16 21.5 22 15.5 25 15.5C28 15.5 34 21.5 34 21.5" stroke="black" stroke-width="2"
                            fill="none" />
                        <path d="M14 15.5C14 15.5 21 7.5 25 7.5C29 7.5 36 15.5 36 15.5" stroke="black" stroke-width="2"
                            fill="none" />
                        <text x="50" y="32" font-family="Arial, sans-serif" font-size="24" font-weight="bold"
                            fill="white">声破天</text>
                    </svg>
                </a>
            </div>
            <nav class="main-nav">
                <ul>
                    <li class="nav-item">
                        <a href="index.html"><i class="fas fa-home"></i> <span data-i18n="nav_home">首页</span></a>
                    </li>
                    <li class="nav-item">
                        <a href="search.html"><i class="fas fa-search"></i> <span data-i18n="nav_search">搜索</span></a>
                    </li>
                    <li class="nav-item">
                        <a href="explore.html"><i class="fas fa-compass"></i> <span data-i18n="nav_explore">探索</span></a>
                    </li>
                    <li class="nav-item">
                        <a href="library.html"><i class="fas fa-book"></i> <span data-i18n="nav_library">音乐库</span></a>
                    </li>
                </ul>
            </nav>

            <div class="library-nav">
                <div class="library-header">
                    <h2><i class="fas fa-plus-square"></i> <span data-i18n="create_playlist">创建播放列表</span></h2>
                </div>
                <div class="library-items">
                    <div class="library-item">
                        <div class="liked-songs">
                            <div class="liked-gradient">
                                <i class="fas fa-heart"></i>
                            </div>
                            <h3 data-i18n="liked_songs">我喜欢的歌曲</h3>
                            <p><span data-i18n="playlist">播放列表</span> • 32 <span data-i18n="songs">首歌曲</span></p>
                        </div>
                    </div>
                    <div class="playlists">
                        <div class="playlist-item">
                            <a href="following.html" style="text-decoration: none; color: inherit;">
                                <h3 data-i18n="playlist_1">我的关注</h3>
                                <p data-i18n="playlist_by_user">播放列表 • 用户</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </aside>

        <!-- 主内容区 -->
        <main class="content">
            <header class="top-bar">
                <div class="navigation-buttons">
                    <button class="nav-btn"><i class="fas fa-chevron-left"></i></button>
                    <button class="nav-btn"><i class="fas fa-chevron-right"></i></button>
                </div>
                <div class="user-menu">
                    <div class="language-selector">
                        <div class="language-options">
                            <button class="language-btn" data-lang="zh-CN">简体中文</button>
                            <button class="language-btn" data-lang="en">English</button>
                            <button class="language-btn" data-lang="zh-TW">繁體中文</button>
                        </div>
                    </div>
                    <div class="auth-buttons">
                        <!-- 登录状态将由JavaScript动态填充 -->
                        <a href="login.html" class="login-btn"><i class="fas fa-sign-in-alt"></i> <span data-i18n="login">登录</span></a>
                        <a href="register.html" class="register-btn"><i class="fas fa-user-plus"></i> <span data-i18n="register">注册</span></a>
                    </div>
                </div>
            </header>

            <!-- 关于页面内容 -->
            <div class="content-container about-container">
                <!-- 页面头部横幅 -->
                <div class="about-header">
                    <div class="about-banner">
                        <h1>关于声破天音乐</h1>
                        <p>我们致力于为全球音乐爱好者提供最优质的音乐体验，连接艺术家与听众，传递音乐的无限魅力。</p>
                    </div>
                </div>

                <!-- 数据统计 -->
                <div class="about-stats">
                    <div class="stat-item">
                        <div class="stat-number">5000万+</div>
                        <div class="stat-description">活跃用户</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">1000万+</div>
                        <div class="stat-description">音乐曲目</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">100+</div>
                        <div class="stat-description">覆盖国家</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">10000+</div>
                        <div class="stat-description">合作艺术家</div>
                    </div>
                </div>

                <!-- 公司简介 -->
                <div class="about-section">
                    <h2 class="section-title">我们的故事</h2>
                    <p class="about-text">
                        声破天音乐成立于2015年，是中国领先的音乐流媒体平台。我们的使命是通过创新技术和个性化服务，为用户带来最佳的音乐体验，同时为音乐人提供公平、透明的分发渠道。</p>
                    <p class="about-text">
                        从最初的小型创业团队到如今的行业领导者，声破天音乐始终坚持"用户第一"的理念，不断突破技术边界，优化服务体验。我们相信，音乐是一种强大的情感连接方式，能够跨越语言和文化的障碍，将世界各地的人们连接在一起。
                    </p>
                    <p class="about-text">
                        如今，声破天音乐已经发展成为中国市场最具影响力的音乐平台之一，服务于超过5000万活跃用户，提供超过1000万首歌曲，覆盖流行、摇滚、古典、电子、民谣等各类音乐风格，满足不同用户的多样化需求。
                    </p>
                </div>

                <!-- 使命与价值观 -->
                <div class="about-section">
                    <h2 class="section-title">我们的使命与价值观</h2>
                    <p class="about-text">
                        声破天音乐的核心使命是"让每个人都能自由享受音乐的力量"。我们致力于创造一个公平、开放的音乐生态系统，让优质音乐内容得以被发现和欣赏，同时确保创作者获得合理的回报。</p>

                    <div class="mission-values">
                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-users"></i>
                            </div>
                            <h3 class="value-title">用户至上</h3>
                            <p class="value-text">我们始终将用户需求放在首位，不断优化产品和服务，提供个性化的音乐体验。</p>
                        </div>

                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-lightbulb"></i>
                            </div>
                            <h3 class="value-title">创新精神</h3>
                            <p class="value-text">我们鼓励创新思维，不断探索新技术和新模式，推动音乐产业的发展和变革。</p>
                        </div>

                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-handshake"></i>
                            </div>
                            <h3 class="value-title">合作共赢</h3>
                            <p class="value-text">我们致力于与艺术家、唱片公司和合作伙伴建立长期、稳定、互利的合作关系。</p>
                        </div>

                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-shield-alt"></i>
                            </div>
                            <h3 class="value-title">诚信透明</h3>
                            <p class="value-text">我们坚持诚实守信，公开透明的原则，保护用户隐私和数据安全。</p>
                        </div>
                    </div>
                </div>

                <!-- 发展历程 -->
                <div class="about-section">
                    <h2 class="section-title">发展历程</h2>
                    <div class="timeline">
                        <div class="milestone">
                            <div class="milestone-year">2015年</div>
                            <div class="milestone-title">声破天音乐成立</div>
                            <div class="milestone-description">在北京成立公司，发布第一个版本的音乐流媒体应用。</div>
                        </div>

                        <div class="milestone">
                            <div class="milestone-year">2017年</div>
                            <div class="milestone-title">用户突破1000万</div>
                            <div class="milestone-description">活跃用户数量突破1000万，成为中国增长最快的音乐平台。</div>
                        </div>

                        <div class="milestone">
                            <div class="milestone-year">2019年</div>
                            <div class="milestone-title">国际化扩张</div>
                            <div class="milestone-description">开始国际化布局，服务拓展至东南亚地区。</div>
                        </div>

                        <div class="milestone">
                            <div class="milestone-year">2021年</div>
                            <div class="milestone-title">高品质音频升级</div>
                            <div class="milestone-description">推出无损音质服务，为用户提供更高品质的音乐体验。</div>
                        </div>

                        <div class="milestone">
                            <div class="milestone-year">2023年</div>
                            <div class="milestone-title">AI音乐推荐系统</div>
                            <div class="milestone-description">引入先进的AI推荐技术，为用户提供更精准的音乐推荐。</div>
                        </div>

                        <div class="milestone">
                            <div class="milestone-year">2024年</div>
                            <div class="milestone-title">全新平台升级</div>
                            <div class="milestone-description">全面更新用户界面和功能，推出社区互动和创作者平台。</div>
                        </div>
                    </div>
                </div>

                <!-- 团队介绍 -->
                <div class="about-section">
                    <h2 class="section-title">领导团队</h2>
                    <p class="about-text">声破天音乐拥有一支充满激情和创造力的团队，他们来自音乐、技术和商业等不同领域，共同致力于推动音乐产业的创新和发展。</p>

                    <div class="team-grid">
                        <div class="team-member">
                            <img src="assets/images/team/ceo.jpg" alt="CEO照片" class="member-photo">
                            <div class="member-info">
                                <h3 class="member-name">张明</h3>
                                <div class="member-title">创始人兼首席执行官</div>
                                <p class="member-bio">前互联网公司高管，音乐爱好者，致力于通过技术改变音乐产业。</p>
                                <div class="member-social">
                                    <a href="#"><i class="fab fa-weibo"></i></a>
                                    <a href="#"><i class="fab fa-linkedin"></i></a>
                                </div>
                            </div>
                        </div>

                        <div class="team-member">
                            <img src="assets/images/team/cto.jpg" alt="CTO照片" class="member-photo">
                            <div class="member-info">
                                <h3 class="member-name">李科</h3>
                                <div class="member-title">首席技术官</div>
                                <p class="member-bio">人工智能专家，负责声破天的技术架构和创新。</p>
                                <div class="member-social">
                                    <a href="#"><i class="fab fa-github"></i></a>
                                    <a href="#"><i class="fab fa-twitter"></i></a>
                                </div>
                            </div>
                        </div>

                        <div class="team-member">
                            <img src="assets/images/team/cpo.jpg" alt="CPO照片" class="member-photo">
                            <div class="member-info">
                                <h3 class="member-name">王琳</h3>
                                <div class="member-title">首席产品官</div>
                                <p class="member-bio">前音乐制作人，专注于打造最佳用户体验。</p>
                                <div class="member-social">
                                    <a href="#"><i class="fab fa-instagram"></i></a>
                                    <a href="#"><i class="fab fa-weibo"></i></a>
                                </div>
                            </div>
                        </div>

                        <div class="team-member">
                            <img src="assets/images/team/cmo.jpg" alt="CMO照片" class="member-photo">
                            <div class="member-info">
                                <h3 class="member-name">赵思远</h3>
                                <div class="member-title">首席营销官</div>
                                <p class="member-bio">数字营销专家，负责品牌战略和用户增长。</p>
                                <div class="member-social">
                                    <a href="#"><i class="fab fa-twitter"></i></a>
                                    <a href="#"><i class="fab fa-linkedin"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 联系我们 -->
                <div class="about-section contact-cta">
                    <h2 class="cta-title">加入我们，共创音乐未来</h2>
                    <p class="cta-text">无论您是音乐爱好者、艺术家还是行业合作伙伴，我们都期待与您携手，共同推动音乐产业的发展。</p>
                    <div class="cta-buttons">
                        <a href="#" class="cta-button primary">联系我们</a>
                        <a href="#" class="cta-button secondary">加入团队</a>
                    </div>
                </div>

                <div class="about-footer">
                    <p>声破天音乐 © 2024 版权所有</p>
                </div>
            </div>
        </main>
    </div>

    <!-- 底部播放器 -->
    <footer class="player-bar">
        <div class="now-playing">
            <div class="track-info">
                <div class="track-image" title="点击查看歌词">
                    <img src="assets/images/covers/cover2.jpg" alt="当前播放歌曲">
                </div>
                <div class="track-details">
                    <h4 class="track-name">晴天</h4>
                    <p class="artist-name">周杰伦 - 叶惠美</p>
                </div>
            </div>
            <div class="track-actions">
                <button class="action-btn"><i class="far fa-heart"></i></button>
                <button class="action-btn"><i class="fas fa-external-link-alt"></i></button>
            </div>
        </div>

        <div class="player-controls">
            <div class="control-buttons">
                <button class="control-btn"><i class="fas fa-random"></i></button>
                <button class="control-btn"><i class="fas fa-step-backward"></i></button>
                <button class="control-btn play-btn"><i class="fas fa-play"></i></button>
                <button class="control-btn"><i class="fas fa-step-forward"></i></button>
                <button class="control-btn"><i class="fas fa-redo"></i></button>
            </div>
            <div class="playback-bar">
                <span class="current-time">0:00</span>
                <div class="progress-bar">
                    <div class="progress"></div>
                    <div class="progress-handle"></div>
                </div>
                <span class="total-time">4:29</span>
            </div>
        </div>

        <div class="player-options">
            <button class="option-btn"><i class="fas fa-list"></i></button>
            <button class="option-btn"><i class="fas fa-desktop"></i></button>
            <div class="volume-control">
                <button class="option-btn"><i class="fas fa-volume-up"></i></button>
                <div class="volume-bar">
                    <div class="volume-level"></div>
                    <div class="volume-handle"></div>
                </div>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script src="assets/js/i18n.js"></script>
    <script src="assets/js/navigation.js"></script>
    <script src="assets/js/app.js"></script>
    <script src="assets/js/player.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // 初始化公共功能
            if (typeof initCommonFeatures === 'function') {
                initCommonFeatures();
            }
            
            // 初始化底部播放器状态
            if (typeof initPlayerStateSync === 'function') {
                initPlayerStateSync();
            }
            
            // 导航按钮功能
            const backButton = document.querySelector('.navigation-buttons .nav-btn:first-child');
            const forwardButton = document.querySelector('.navigation-buttons .nav-btn:last-child');

            backButton.addEventListener('click', () => {
                window.history.back();
            });

            forwardButton.addEventListener('click', () => {
                window.history.forward();
            });

            // CTA按钮功能
            const primaryButton = document.querySelector('.cta-button.primary');
            const secondaryButton = document.querySelector('.cta-button.secondary');

            if (primaryButton) {
                primaryButton.addEventListener('click', () => {
                    window.location.href = 'contact.html';
                });
            }

            if (secondaryButton) {
                secondaryButton.addEventListener('click', () => {
                    window.location.href = 'careers.html';
                });
            }
        });
    </script>
</body>

</html>